<template>
	<view>
		<view class="opcheader box d-jc-sb d-ai-c">
			<view class="">
				选择陪诊员性别
			</view>
			<view class="" @tap="back">
				确定
			</view>
		</view>
		<view class="selectopc">
			<radio-group @change="radioChange" class="box">
				<label class="uni-lab box ml-4" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio :value="item.value" :color="show"  :checked="index === current1" />
					</view>
					<view class="">
						<text>{{item.name}}</text>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="">
			<radio-group @change="radioChange1">
				<label class="uni-lab box poclist d-jc-sb d-ai-c" v-for="(item, index) in employeelist" :key="index">
					<view class="box d-ai-c left">
						<image class="list_image" :src="item.image" mode=""></image>
						<image v-if="item.sex==1" class="sexImg" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/nan@2x.png" mode=""></image>
						<image v-if="item.sex==2" class="sexImg" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/nv@2x.png" mode=""></image>
						<view class="ml-2">{{item.name}}</view>
						<view class="example-body ml-2">
							<uni-rate size="18" :margin="4" active-color="#FF8338" :readonly="true" :value="item.grade" />
						</view>
					</view>
					
					<view>
						<radio :value="item.accompanyId+','+item.name" :color="show"  :checked="(index+1) == current" />
					</view>
					
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				employeelist:'',
				rateValue:3,
				show:'#FF8338',
				items: [{
						value: '1',
						name: '全部'
					},
					{
						value: '2',
						name: '男',
					},{
						value: '3',
						name: '女',
					}
				
				],
				current: 0,
				items1: [{
						value: '1',
						name: '赵先生',
						image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/logo.png'
					},
					{
						value: '2',
						name: '朱阿姨',
						image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/logo.png'
					},{
						value: '3',
						name: '张先生',
						image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/logo.png'
					}
				
				],
				current1: 0,
				uid:'',
				sex:'',
				id:'',
				name:'',
			}
		},
		onLoad(){
			this.getchooseemployeelist()
		},
		methods: {
			back(){
				var attendant = {
					name:this.name,
					id:this.id
				}
				uni.$emit('chooseattendant',attendant)
				uni.navigateBack({
					delta:1
				})
				// this.uid = ''
			},
			radioChange: function(evt) {
				let _this = this
				console.log(evt.detail.value)
				for (let i = 0; i < _this.items.length; i++) {
					if (_this.items[i].value === evt.detail.value) {
						_this.current1 = i;
						break;
					}
				}
				if(_this.current1==0){
					_this.sex = ''
					_this.getchooseemployeelist()
				}else if(_this.current1==1){
					_this.sex = 1
					_this.getchooseemployeelist()
				}else if(_this.current1==2){
					_this.sex = 2
					_this.getchooseemployeelist()
				}
				console.log(_this.current1)
			},
			radioChange1: function(evt) {
				let _this = this
				_this.uid = evt.detail.value
				var object = _this.uid.split(',')
				console.log(object)
				this.id = object[0]
				this.name = object[1]
				for (let i = 0; i < this.employeelist.length; i++) {
					if (this.employeelist[i].uid === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			getchooseemployeelist(){
				this.$api.chooseemployee({
					sex:this.sex
				}).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.employeelist = res.data.dataMap
						// this.uid = this.employeelist[0].uid
					}
							
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@font-face {
			font-family: uniicons;
			font-weight: normal;
			font-style: normal;
			src: url("~@/components/uni-icons/uni.ttf") format("truetype");
		}
page{
	background: #F2F7FF;
}
.opcheader{
		height: 100rpx;
		width: 690rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
		background-color: #FFFFFF;
	view:nth-child(1){
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	view:nth-child(2){
		width: 120rpx;
		height: 60rpx;
		background: #FF8338;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
	
}
.selectopc{
	height: 100rpx;
	width: 690rpx;
	padding: 0 30rpx;
	line-height: 100rpx;
	background-color: #FFFFFF;
}
.poclist{
	height: 85rpx;
	width: 690rpx;
	padding: 0 30rpx;
	background-color: #FFFFFF;
	margin-top: 3rpx;
	.left{
		position: relative;
		.list_image{
			height: 72rpx;
			width: 72rpx;
			border-radius:50%;
		}
		.sexImg{
			height: 24rpx;
			width: 24rpx;
			position: absolute;
			left: 50rpx;
			bottom: 0;
		}
	}
}
</style>
